<template>
    <div class="cart-box">
        <div class="cart-box-title display-flex">
            <div class="cart-box-title-left">
                订单编号：{{ props.item.id }}
            </div>
            <div class="cart-box-title-right text-tr">
                <span class="text-red">{{ props.item.status_text }}</span>
            </div>
        </div>
        <div class="cart-box-main display-flex">
            <div class="cart-box-main-left">
                <van-image width="38.666667vw" height="38.666667vw" fit="cover" lazy-load
                    :src="props.item.goods_images[0]" />
            </div>
            <div class="cart-box-main-right">
                <div class="box-main-right-title van-multi-ellipsis--l2">{{ props.item.name }}</div>
                <div class="box-main-right-price font-size-32 text-red">￥{{ props.item.price }}</div>
                <div class="box-main-right-user"><span class="user-icon user-icon-bg1 font-size-20">卖家</span>{{
                    props.item.shop_user.shop_name }}
                </div>
                <div class="box-main-right-code text-color9 font-size-28 display-flex">
                    <div class="invitation-code">邀请码：{{ props.item.shop_user.invitation_code }}</div>
                    <div class="invitation-copy"
                        @click="copyTextToClipboard(props.item.shop_user.invitation_code,'卖家')">
                        <van-image width="2.933333vw" height="3.333333vw" fit="cover" lazy-load :src="copy" />
                    </div>
                </div>
                <div class="box-main-right-user"><span class="user-icon user-icon-bg2 font-size-20">买家</span>{{
                    props.item.buy_user.real_name }}
                </div>
                <div class="box-main-right-code text-color9 font-size-28 display-flex">
                    <div class="invitation-code">邀请码：{{ props.item.buy_user.invitation_code }}</div>
                    <div class="invitation-copy" @click="copyTextToClipboard(props.item.buy_user.invitation_code,'买家')">
                        <van-image width="2.933333vw" height="3.333333vw" fit="cover" lazy-load :src="copy" />
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-box-footer display-flex">
            <div class="cart-box-footer-left"></div>
            <div class="cart-box-footer-right text-tr text-color9">{{ props.item.createtime }}</div>
        </div>
    </div>
</template>

<script setup>
import copy from '@image/Cart/icon_01.png'

let props = defineProps({
    item: {
        type: Object,
    }
});
let copyTextToClipboard=(text,name)=> {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
            console.log(name+'文本已成功复制到剪切板！‌');
        }).catch(err => {
            console.error(name+'复制文本失败：‌', err);
        });
    } else {
        console.log('浏览器不支持剪切板API！‌');
    }
}
</script>

<style lang="scss" scoped>
.cart-box {
    margin: 40px 20px;
    background-color: var(--white);
    padding: 10px;
    border-radius: 10px;
}

.cart-box-title {
    height: 60px;
    line-height: 60px;
}

.cart-box-title-left {
    flex: 1;
}

.cart-box-title-right {
    max-width: 180px;
}

.cart-box-main {
    padding: 10px 0;
}

.cart-box-main-left {
    width: 290px;
    height: 290px;
    border-radius: 5px;
    overflow: hidden;
}

.cart-box-main-right {
    padding-left: 20px;
    flex: 1;
}

.box-main-right-title {
    height: 88px;
    line-height: 180%;
}

.box-main-right-price,
.box-main-right-code,
.user-icon {
    height: 48px;
    line-height: 48px;
}

.user-icon {
    padding: 5px 15px;
    margin-right: 10px;
    vertical-align: middle;
    color: var(--white);
    border-radius: 10px 0 10px 0;
}

.user-icon-bg1 {
    background-color:#7A8EF7;
}

.user-icon-bg2 {

    background-color: #F78B7A;
}

.box-main-right-code,
.user-icon {
    height: 40px;
    line-height: 40px;
}
.invitation-code{ width: 260px;}
.invitation-copy{flex: 1;}
.cart-box-footer-left,.cart-box-footer-right{flex: 1;}
.cart-box-footer{height: 80px;line-height: 80px;}
</style>